<template>
	<view class="pageBox" :style="{'paddingTop' : topOne + 'px'}">

		<view class="searchBox flex-between"
			:style="{position: 'fixed', top: 0, left: 0, zIndex: 2, paddingTop: topTwo + 'px' }">
			<image class="leftArrow" src="http://www.bobei.shop/static/third/leftArrow.png" @click="goBack"></image>
			<view class="search flex-row">
				<image class="searchIcon" src="http://www.bobei.shop/static/third/searchIcon.png" mode=""></image>
				<input class="searchValue" type="text" placeholder="请输入你需要搜索的商品" v-model="searchValue">
			</view>
			<button class="searchBtn" :plain="true" @click="onSearchBtn">搜索</button>
		</view>

		<!-- 搜索出来的列表 -->
		<view v-if="search">
			<view class="waterfallBox">
				<view class="waterfall flex">
					<view class="wt-list wt-left flex">
						<view class="wt-item flex" v-for="item in LeftList" :key="item.id"
							@click="goGoodsDetails(item)">
							<image class="thumb" mode="widthFix" :src="item.thumbUrl"></image>
							<!-- 特卖标签 -->
							<view class="specialSale flex-center" v-if="item.isdiscount == 1">
								<image class="specialSaleImg" src="http://www.bobei.shop/static/third/teMaiIcon.png"
									mode=""></image>
							</view>

							<!-- 秒杀倒计时 -->
							<view class="countdownBox flex-center" v-if="item.isSpike == 1 && item.isdiscount != 1">
								<view class="countdownTitle">
									秒杀:
								</view>
								<uni-countdown :showDay="false" :hour="item.time_h" :minute="item.time_m"
									:second="item.time_s" color="#ffffff" splitorColor="#ffffff">
								</uni-countdown>
							</view>
							<!-- 商品信息 -->
							<view
								:class="[item.genre == 0 ? 'wt-item-info wt-item-info-bg-yellow' : 'wt-item-info wt-item-info-bg-white']">
								<!-- 标签 -->
								<!-- <scroll-view class="info-sign-scroll" :scroll-x="true"
									v-if="item.labelname && item.labelname.length && item.isSpike == 1">
									<view class="info-sign flex">
										<view class="info-sign-item flex-center"
											v-for="(item2,index2) in item.labelname" :key="index2">
											<view class="info-sign-item-title">
												{{ item2.label }}
											</view>
											<view class="info-sign-item-line"></view>
										</view>
									</view>
								</scroll-view> -->
								<!-- VIP标志 -->
								<view class="vipBox flex-center" v-if="item.genre == 0">
									<view class="vipTitle">
										推荐
									</view>
									<view class="vipLine"></view>
								</view>
								<view class="goodsBox">
									<view class="title threeHidden">
										{{ item.title }}
									</view>
									<!-- 商品标签 -->
									<scroll-view class="goodsSignScroll" :scroll-x="true"
										v-if="item.labelname && item.labelname.length && item.genre == 0">
										<view class="goodsSign flex-row">
											<view class="goodsSignItem flex-row"
												v-for="(item2,index2) in item.labelname" :key="index2">
												<view class="goodsSignItemTitle">
													{{ item2.label }}
												</view>
												<view class="goodsSignItemLine"></view>
											</view>
										</view>
									</scroll-view>
									<!-- 商品标签 -->
									<scroll-view class="goodsSignScroll" :scroll-x="true"
										v-if="item.labelname && item.labelname.length && item.hot == 1">
										<view class="goodsSign flex-row">
											<view class="goodsSignItem2" v-for="(item2,index2) in item.labelname"
												:key="index2">
												{{ item2.label }}
											</view>
										</view>
									</scroll-view>
									<!-- 价格 -->
									<view class="goodsPriceBox flex-between">
										<view class="goodsPrice">
											<view class="market">
												¥{{ item.marketprice }}
											</view>
											<view class="del">
												<view class="deltext">
													¥{{ item.productprice }}
												</view>
												<view class="delLine"></view>
											</view>
										</view>
										<image class="goodsCart" src="http://www.bobei.shop/static/third/goodsCart.png">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wt-list wt-right flex">
						<view class="wt-item flex" v-for="item in RightList" :key="item.id"
							@click="goGoodsDetails(item)">
							<image class="thumb" mode="widthFix" :src="item.thumbUrl"></image>
							<view class="specialSale flex-center" v-if="item.isdiscount == 1">
								<image class="specialSaleImg" src="http://www.bobei.shop/static/third/teMaiIcon.png"
									mode=""></image>
							</view>

							<view class="countdownBox flex-center" v-if="item.isSpike == 1 && item.isdiscount != 1">
								<view class="countdownTitle">
									秒杀:
								</view>
								<uni-countdown :showDay="false" :hour="item.time_h" :minute="item.time_m"
									:second="item.time_s" color="#ffffff" splitorColor="#ffffff">
								</uni-countdown>
							</view>
							<view
								:class="[item.genre == 0 ? 'wt-item-info wt-item-info-bg-yellow' : 'wt-item-info wt-item-info-bg-white']">
								<!-- 标签 -->
								<!-- <scroll-view class="info-sign-scroll" :scroll-x="true"
									v-if="item.labelname && item.labelname.length && item.isSpike == 1">
									<view class="info-sign flex">
										<view class="info-sign-item flex-center"
											v-for="(item2,index2) in item.labelname" :key="index2">
											<view class="info-sign-item-title">
												{{ item2.label }}
											</view>
											<view class="info-sign-item-line"></view>
										</view>
									</view>
								</scroll-view> -->
								<!-- VIP标志 -->
								<view class="vipBox flex-center" v-if="item.genre == 0">
									<view class="vipTitle">
										推荐
									</view>
									<view class="vipLine"></view>
								</view>
								<view class="goodsBox">
									<view class="title threeHidden">
										{{ item.title }}
									</view>
									<!-- 商品标签 -->
									<scroll-view class="goodsSignScroll" :scroll-x="true"
										v-if="item.labelname && item.labelname.length && item.genre == 0">
										<view class="goodsSign flex-row">
											<view class="goodsSignItem flex-row"
												v-for="(item2,index2) in item.labelname" :key="index2">
												<view class="goodsSignItemTitle">
													{{ item2.label }}
												</view>
												<view class="goodsSignItemLine"></view>
											</view>
										</view>
									</scroll-view>
									<!-- 商品标签 -->
									<scroll-view class="goodsSignScroll" :scroll-x="true"
										v-if="item.labelname && item.labelname.length && item.hot == 1">
										<view class="goodsSign flex-row">
											<view class="goodsSignItem2" v-for="(item2,index2) in item.labelname"
												:key="index2">
												{{ item2.label }}
											</view>
										</view>
									</scroll-view>
									<!-- 价格 -->
									<view class="goodsPriceBox flex-between">
										<view class="goodsPrice">
											<view class="market">
												¥{{ item.marketprice }}
											</view>
											<view class="del">
												<view class="deltext">
													¥{{ item.productprice }}
												</view>
												<view class="delLine"></view>
											</view>
										</view>
										<image class="goodsCart" src="http://www.bobei.shop/static/third/goodsCart.png">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<uni-load-more :status="listStatus"></uni-load-more>
		</view>

		<!-- 没有搜索时的页面 -->
		<view v-if="!search">
			<view class="titleBox flex-between">
				<view class="title">
					历史搜索
				</view>
				<image class="deleteIcon" src="http://www.bobei.shop/static/third/deleteIcon.png"
					@click="deleteHistory"></image>
			</view>

			<view class="history flex">
				<view class="historyItem flex-center" v-for="(item,index) in history" :key="index"
					@click="searchValue = item">
					{{ item }}
				</view>
			</view>

			<!-- <view class="titleBox flex-between">
				<view class="title">
					猜你想搜
				</view>
				<button class="batch" :plain="true">换一批</button>
			</view>

			<view class="want flex">
				<view class="wantItem flex-row" v-for="(item,index) in 8" :key="index">
					<view class="wantItemText">
						投影仪推荐
					</view>

					<view class="wantItemHot">
						热
					</view>
				</view>
			</view> -->

			<view class="titleBox2 flex-center">
				<view class="titleLeft"></view>
				<view class="titleLCenter flex-center">
					<image class="heartIcon" src="http://www.bobei.shop/static/third/heartIcon.png"></image>
					<view class="titleLCenterText">
						热卖推荐
					</view>
				</view>
				<view class="titleRight"></view>
			</view>

			<view class="waterfallBox">
				<view class="waterfall flex">
					<view class="wt-list wt-left flex">
						<view class="wt-item flex" v-for="item in LeftList2" :key="item.id"
							@click="goGoodsDetails(item)">
							<image class="thumb" mode="widthFix" :src="item.thumbUrl"></image>
							<!-- 特卖标签 -->
							<view class="specialSale flex-center" v-if="item.isdiscount == 1">
								<image class="specialSaleImg" src="http://www.bobei.shop/static/third/teMaiIcon.png"
									mode=""></image>
							</view>

							<!-- 秒杀倒计时 -->
							<view class="countdownBox flex-center" v-if="item.isSpike == 1 && item.isdiscount != 1">
								<view class="countdownTitle">
									秒杀:
								</view>
								<uni-countdown :showDay="false" :hour="item.time_h" :minute="item.time_m"
									:second="item.time_s" color="#ffffff" splitorColor="#ffffff">
								</uni-countdown>
							</view>
							<!-- 商品信息 -->
							<view
								:class="[item.genre == 0 ? 'wt-item-info wt-item-info-bg-yellow' : 'wt-item-info wt-item-info-bg-white']">
								<!-- 标签 -->
								<!-- <scroll-view class="info-sign-scroll" :scroll-x="true"
									v-if="item.labelname && item.labelname.length && item.isSpike == 1">
									<view class="info-sign flex">
										<view class="info-sign-item flex-center"
											v-for="(item2,index2) in item.labelname" :key="index2">
											<view class="info-sign-item-title">
												{{ item2.label }}
											</view>
											<view class="info-sign-item-line"></view>
										</view>
									</view>
								</scroll-view> -->
								<!-- VIP标志 -->
								<view class="vipBox flex-center" v-if="item.genre == 0">
									<view class="vipTitle">
										推荐
									</view>
									<view class="vipLine"></view>
								</view>
								<view class="goodsBox">
									<view class="title threeHidden">
										{{ item.title }}
									</view>
									<!-- 商品标签 -->
									<scroll-view class="goodsSignScroll" :scroll-x="true"
										v-if="item.labelname && item.labelname.length && item.genre == 0">
										<view class="goodsSign flex-row">
											<view class="goodsSignItem flex-row"
												v-for="(item2,index2) in item.labelname" :key="index2">
												<view class="goodsSignItemTitle">
													{{ item2.label }}
												</view>
												<view class="goodsSignItemLine"></view>
											</view>
										</view>
									</scroll-view>
									<!-- 商品标签 -->
									<scroll-view class="goodsSignScroll" :scroll-x="true"
										v-if="item.labelname && item.labelname.length && item.hot == 1">
										<view class="goodsSign flex-row">
											<view class="goodsSignItem2" v-for="(item2,index2) in item.labelname"
												:key="index2">
												{{ item2.label }}
											</view>
										</view>
									</scroll-view>
									<!-- 价格 -->
									<view class="goodsPriceBox flex-between">
										<view class="goodsPrice">
											<view class="market">
												¥{{ item.marketprice }}
											</view>
											<view class="del">
												<view class="deltext">
													¥{{ item.productprice }}
												</view>
												<view class="delLine"></view>
											</view>
										</view>
										<image class="goodsCart" src="http://www.bobei.shop/static/third/goodsCart.png">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wt-list wt-right flex">
						<view class="wt-item flex" v-for="item in RightList2" :key="item.id"
							@click="goGoodsDetails(item)">
							<image class="thumb" mode="widthFix" :src="item.thumbUrl"></image>
							<view class="specialSale flex-center" v-if="item.isdiscount == 1">
								<image class="specialSaleImg" src="http://www.bobei.shop/static/third/teMaiIcon.png"
									mode=""></image>
							</view>

							<view class="countdownBox flex-center" v-if="item.isSpike == 1 && item.isdiscount != 1">
								<view class="countdownTitle">
									秒杀:
								</view>
								<uni-countdown :showDay="false" :hour="item.time_h" :minute="item.time_m"
									:second="item.time_s" color="#ffffff" splitorColor="#ffffff">
								</uni-countdown>
							</view>
							<view
								:class="[item.genre == 0 ? 'wt-item-info wt-item-info-bg-yellow' : 'wt-item-info wt-item-info-bg-white']">
								<!-- 标签 -->
								<!-- <scroll-view class="info-sign-scroll" :scroll-x="true"
									v-if="item.labelname && item.labelname.length && item.isSpike == 1">
									<view class="info-sign flex">
										<view class="info-sign-item flex-center"
											v-for="(item2,index2) in item.labelname" :key="index2">
											<view class="info-sign-item-title">
												{{ item2.label }}
											</view>
											<view class="info-sign-item-line"></view>
										</view>
									</view>
								</scroll-view> -->
								<!-- VIP标志 -->
								<view class="vipBox flex-center" v-if="item.genre == 0">
									<view class="vipTitle">
										推荐
									</view>
									<view class="vipLine"></view>
								</view>
								<view class="goodsBox">
									<view class="title threeHidden">
										{{ item.title }}
									</view>
									<!-- 商品标签 -->
									<scroll-view class="goodsSignScroll" :scroll-x="true"
										v-if="item.labelname && item.labelname.length && item.genre == 0">
										<view class="goodsSign flex-row">
											<view class="goodsSignItem flex-row"
												v-for="(item2,index2) in item.labelname" :key="index2">
												<view class="goodsSignItemTitle">
													{{ item2.label }}
												</view>
												<view class="goodsSignItemLine"></view>
											</view>
										</view>
									</scroll-view>
									<!-- 商品标签 -->
									<scroll-view class="goodsSignScroll" :scroll-x="true"
										v-if="item.labelname && item.labelname.length && item.hot == 1">
										<view class="goodsSign flex-row">
											<view class="goodsSignItem2" v-for="(item2,index2) in item.labelname"
												:key="index2">
												{{ item2.label }}
											</view>
										</view>
									</scroll-view>
									<!-- 价格 -->
									<view class="goodsPriceBox flex-between">
										<view class="goodsPrice">
											<view class="market">
												¥{{ item.marketprice }}
											</view>
											<view class="del">
												<view class="deltext">
													¥{{ item.productprice }}
												</view>
												<view class="delLine"></view>
											</view>
										</view>
										<image class="goodsCart" src="http://www.bobei.shop/static/third/goodsCart.png">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="listStatus2"></uni-load-more>
			</view>
		</view>
		<determined-popover :showTips="determinedShow" @tipsOpen="determineTipsOpen" @tipsClose="determineTipsClose"
			@onDeterClose="onDeterClose" @onPrefect="determineOnPrefect" :deterTitle="deterTitle"
			:deterContent="deterContent"></determined-popover>
	</view>
</template>

<script>
	import determinedPopover from "../components/determined-popover/determined-popover.vue";
	export default {
		components: {
			"determined-popover": determinedPopover,
		},
		data() {
			return {
				determinedShow: false,
				deterTitle: "",
				deterContent: "",

				statusBarHeight: "",

				searchValue: "",

				goodList: [],
				LeftList: [],
				RightList: [],
				form: {
					page: 1,
					lastId: 0,
				},
				loading: false,
				finished: false,





				goodList2: [],
				LeftList2: [],
				RightList2: [],
				form2: {
					page: 1,
					lastId: 0,
				},
				loading2: false,
				finished2: false,

				search: false,
				topOne: 0,
				topTwo: 0,

				history: [], // 搜索记录 做本地缓存


			}
		},
		onLoad() {
			// console.log(this.$mySysInfo(), "系统信息");
			this.statusBarHeight = this.$mySysInfo().top;
			this.topOne = this.statusBarHeight + 66;
			this.topTwo = this.statusBarHeight + 20;


		},
		onShow() {
			this.history = uni.getStorageSync('searchHistory') ? JSON.parse(uni.getStorageSync('searchHistory')) : [];
			// console.log("this.history", this.history);
			this.form2.page = 1;
			this.form2.lastId = 0;
			this.loading2 = false;
			this.finished2 = false;
			this.goodList2 = [];
			this.getGoodList2();
		},
		onReachBottom() {
			this.getGoodList();
			this.getGoodList2();
		},
		computed: {
			listStatus() {
				if (this.finished) return "noMore";
				if (this.loading) return "loading";
				return "more";
			},
			listStatus2() {
				if (this.finished2) return "noMore";
				if (this.loading2) return "loading";
				return "more";
			}
		},

		methods: {
			deleteHistory() {
				this.deterTitle = "提示";
				this.deterContent = "删除历史搜索记录？";
				this.determinedShow = true;
			},
			determineTipsOpen(param) {
				this.determinedShow = param;
			},
			determineTipsClose(param) {
				this.determinedShow = param;
			},
			onDeterClose() {
				this.determinedShow = false;
			},
			determineOnPrefect() {
				this.determinedShow = false;
				uni.removeStorageSync('searchHistory');
				this.history = uni.getStorageSync('searchHistory') ? JSON.parse(uni.getStorageSync('searchHistory')) : [];
				this.$forceUpdate();
			},

			getGoodList2() {
				if (this.search) return;
				if (this.loading2 || this.finished2) return;
				this.loading2 = true;
				this.$post({
					url: '/portal/Shop',
					module: 'Goods',
					interface: 2000,
					data: {
						sort: "",
						type: "ishot",
						cateId: "",
						shopId: "",
						genre: "",
						parentId: "",
						keyword: "",
						...this.form2,
					},
				}).then(res => {
					// console.log(res, "热卖")
					this.goodList2 = [...this.goodList2, ...res.list];
					this.goodList2.forEach((item) => {
						if (item.isSpike == 1) {
							let time = this.getHMS(item.isSpikeInfo.overTime);
							item.time_h = Number(time.h);
							item.time_m = Number(time.m);
							item.time_s = Number(time.s);
						}

					})
					this.LeftList2 = [];
					this.RightList2 = [];

					// 将商品信息列表分为左侧右侧两个部分
					for (let i = 0; i < this.goodList2.length; i++) {
						if (i % 2 === 0) {
							this.LeftList2.push(this.goodList2[i]);
						} else {
							this.RightList2.push(this.goodList2[i]);
						}
					}
					// console.log("this.LeftList2:", this.LeftList2, "this.RightList2:", this.RightList2)
					this.form2.page = res.currentPage + 1;
					this.form2.lastId = res.lastId;
					if (this.form2.page > res.lastPage) {
						this.finished2 = true;
					}
					this.loading2 = false;

				}).catch(() => {
					this.loading2 = false;
				})
			},
			goGoodsDetails(param) {
				if (param.isSpike == 1 && param.ishot != 1) {
					this.goGoodsDetails2(param, "seckill");
				} else {
					uni.navigateTo({
						url: "/home/goodsDetails?id=" + param.id,
					})
				}

			},
			goGoodsDetails2(param, seckill) {
				uni.navigateTo({
					url: `/home/spikeDetails?id=${param.isSpikeInfo.id}&seckill=${seckill}`
				})
			},
			getGoodList() {
				if (!this.search) return;
				if (this.loading || this.finished) return;
				this.loading = true;
				this.$post({
					url: '/portal/Shop',
					module: 'Goods',
					interface: 2000,
					data: {
						sort: "",
						type: "",
						cateId: "",
						shopId: "",
						genre: "",
						parentId: "",
						keyword: this.searchValue,
						...this.form,
					},
				}).then(res => {
					this.goodList = [...this.goodList, ...res.list];
					this.goodList.forEach((item) => {
						if (item.isSpike == 1) {
							let time = this.getHMS(item.isSpikeInfo.overTime);
							item.time_h = Number(time.h);
							item.time_m = Number(time.m);
							item.time_s = Number(time.s);
						}

					})
					this.LeftList = [];
					this.RightList = [];

					// 将商品信息列表分为左侧右侧两个部分
					for (let i = 0; i < this.goodList.length; i++) {
						if (i % 2 === 0) {
							this.LeftList.push(this.goodList[i]);
						} else {
							this.RightList.push(this.goodList[i]);
						}
					}
					// console.log("this.LeftList:", this.LeftList, "this.RightList:", this.RightList)
					this.form.page = res.currentPage + 1;
					this.form.lastId = res.lastId;
					if (this.form.page > res.lastPage) {
						this.finished = true;
					}
					this.loading = false;

				}).catch(() => {
					this.loading = false;
				})
			},
			onSearchBtn() {
				if (!this.searchValue) {
					uni.showToast({
						icon: 'none',
						duration: 1500,
						title: "请输入您需要搜索的商品",
					})
					return
				}

				this.history.push(this.searchValue);
				let arr = [...new Set(this.history)];

				uni.setStorageSync('searchHistory', JSON.stringify(arr));


				this.search = true;
				this.form.page = 1;
				this.form.lastId = 0;
				this.loading = false;
				this.finished = false;
				this.goodList = [];
				this.getGoodList();
			},
			// 毫秒级时间戳转换时分秒
			getHMS(timestamp) {
				let date = timestamp * 1000;
				let now = new Date().getTime();
				let times = date - now;
				let seconds = Math.floor(times / 1000);
				let minutes = Math.floor(seconds / 60);
				let hours = Math.floor(minutes / 60);
				minutes %= 60;
				seconds %= 60;
				let h = hours;
				let m = minutes.toString().padStart(2, '0');
				let s = seconds.toString().padStart(2, '0');
				return {
					h,
					m,
					s
				}
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: 100vh;
		background-color: #ffffff;
		line-height: 1.2;
		padding: 0 30rpx;

		.searchBox {
			width: 100%;
			padding: 0 30rpx 30rpx;
			background-color: #ffffff;

			.leftArrow {
				width: 40rpx;
				height: 40rpx;
			}

			.search {
				padding: 0 38rpx;
				width: 562rpx;
				height: 56rpx;
				background: #F4F4F4;
				border-radius: 96rpx 96rpx 96rpx 96rpx;

				.searchIcon {
					width: 26rpx;
					height: 26rpx;
					margin-right: 28rpx;
				}

				.searchValue {
					border: none;
					background-color: transparent;
					outline: none;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.searchBtn {
				padding: 0;
				margin: 0;
				border: none;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.titleBox {
			margin-top: 30rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #222222;
			}

			.deleteIcon {
				width: 32rpx;
				height: 36rpx;
			}

			.batch {
				padding: 0;
				margin: 0;
				border: none;
				font-size: 24rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: normal;
				color: #999999;
			}
		}

		.history {
			flex-wrap: wrap;

			.historyItem {
				padding: 6rpx 24rpx;
				background: #F9F9F9;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				margin-top: 30rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-right: 36rpx;
				white-space: nowrap;
			}
		}

		.want {
			padding-top: 8rpx;
			flex-wrap: wrap;

			.wantItem {
				width: 50%;
				margin-top: 30rpx;

				.wantItemText {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.wantItemHot {
					font-size: 16rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #F86B40;
					padding: 4rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					border: 1px solid #F86B40;
					margin-left: 24rpx;

				}
			}
		}


		.titleBox2 {
			margin-top: 24rpx;

			.titleLeft {
				width: 132rpx;
				height: 2rpx;
				background: linear-gradient(270deg, rgba(249, 108, 65, 1), rgba(255, 255, 255, 1));
			}

			.titleRight {
				width: 132rpx;
				height: 2rpx;
				background: linear-gradient(90deg, rgba(249, 108, 65, 1), rgba(255, 255, 255, 1));
			}

			.titleLCenter {
				margin: 0 40rpx;

				.heartIcon {
					width: 40rpx;
					height: 40rpx;
				}

				.titleLCenterText {
					font-size: 28rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #7A797A;
					margin-left: 24rpx;
				}
			}
		}

		.waterfallBox {
			margin: 24rpx auto 0;
			width: 692rpx;

			.waterfall {
				width: 100%;
				overflow: hidden;

				.wt-list {
					flex-direction: column;
					width: 332rpx;
					margin-right: 30rpx;


					.wt-item {
						margin-bottom: 16rpx;
						background-color: #ffffff;
						border-radius: 24rpx;
						position: relative;
						/* 裁切 圆角*/
						overflow: hidden;
						box-shadow: 0px 8rpx 8rpx 0px rgba(212, 212, 212, 0.25);
						flex-direction: column;

						.thumb {
							width: 100%;
						}

						.specialSale {
							width: 70rpx;
							height: 36rpx;
							background: linear-gradient(90deg, #F76F4C 0%, #F85954 100%);
							border-radius: 24rpx 0rpx 24rpx 0rpx;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;

							.specialSaleImg {
								width: 36rpx;
								height: 26rpx;
							}
						}

						.discounts {
							font-size: 16rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							width: 108rpx;
							height: 32rpx;
							background: linear-gradient(90deg, #FD9522 0%, #F4665C 100%);
							border-radius: 24rpx 0px 24rpx 0px;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;
						}

						.countdownBox {
							width: 200rpx;
							height: 36rpx;
							background: linear-gradient(90deg, #FD9522 0%, #F4665C 100%);
							border-radius: 24rpx 0px 24rpx 0px;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;

							.countdownTitle {
								font-size: 16rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								color: #FFFFFF;
								white-space: nowrap;
							}

							/deep/.uni-countdown__number {
								width: auto !important;
							}

							/deep/.uni-countdown {
								padding-bottom: 6rpx;
							}

							/deep/.uni-countdown__number span {
								font-size: 16rpx;
							}

							/deep/.uni-countdown__splitor span {
								font-size: 16rpx;
							}
						}

						.wt-item-info {
							width: 100%;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							padding: 22rpx 12rpx 20rpx;
							position: relative;

							.info-sign-scroll {
								width: 200rpx;
								position: absolute;
								top: -20rpx;
								left: 18rpx;
								z-index: 1;
							}

							.info-sign {
								width: 200rpx;
								height: 32rpx;
								background: linear-gradient(270deg, #F3645D 0%, #FC9520 100%);
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								overflow-x: auto;
								padding: 0 10rpx;

								.info-sign-item {
									.info-sign-item-title {
										font-size: 16rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: 400;
										color: #FFFFFF;
										white-space: nowrap;
									}

									.info-sign-item-line {
										width: 2rpx;
										height: 14rpx;
										background-color: #ffffff;
										margin: 0 6rpx;
									}
								}
							}

							.vipBox {
								flex-direction: column;
								width: 90rpx;
								height: 60rpx;
								background: #FEEAA0;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								position: absolute;
								z-index: 1;
								top: -40rpx;
								left: 30rpx;

								.vipTitle {
									font-size: 28rpx;
									font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
									font-weight: bold;
									color: #8F5F10;
									font-style: italic;
								}

								.vipLine {
									width: 52rpx;
									height: 6rpx;
									background: #8F5F10;
									border-radius: 18rpx 18rpx 18rpx 18rpx;
								}
							}

							.goodsBox {
								padding: 8rpx;
								background-color: #ffffff;
								border-radius: 24rpx;

								.title {
									font-size: 28rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: bold;
									color: #000000;
								}

								.goodsSignScroll {
									width: 300rpx;
								}

								.goodsSign {
									width: 300rpx;
									margin-top: 8rpx;

									.goodsSignItem {
										.goodsSignItemTitle {
											font-size: 20rpx;
											font-family: PingFang SC-Regular, PingFang SC;
											font-weight: normal;
											color: #A6A5A6;
											white-space: nowrap;
										}

										.goodsSignItemLine {
											width: 2rpx;
											height: 22rpx;
											background-color: #A6A5A6;
											margin: 0 16rpx;
										}
									}

									.goodsSignItem2 {
										font-size: 16rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: normal;
										color: #DA93A5;
										padding: 4rpx 6rpx;
										background: #FCEEF3;
										border-radius: 8rpx;
										border: 2rpx solid #F2615F;
										white-space: nowrap;
										margin-right: 12rpx;
									}
								}

								.goodsPriceBox {
									margin-top: 12rpx;

									.goodsPrice {
										.market {
											font-size: 28rpx;
											font-family: PingFang SC-Medium, PingFang SC;
											font-weight: 500;
											color: #E4883A;
										}

										.del {
											position: relative;

											.deltext {
												font-size: 20rpx;
												font-family: PingFang SC-Medium, PingFang SC;
												font-weight: normal;
												color: #CFCDCF;
											}

											.delLine {
												width: 100%;
												height: 2rpx;
												background-color: #CFCDCF;
												position: absolute;
												left: 0;
												top: 50%;
												transform: translate(0, -50%);
											}
										}
									}

									.goodsCart {
										width: 48rpx;
										height: 48rpx;
									}
								}
							}

						}

						.wt-item-info-bg-white {
							background: #ffffff;
						}

						.wt-item-info-bg-yellow {
							background: linear-gradient(180deg, #FEEAA1 0%, #FEE589 100%);
							margin-top: -16rpx;
						}
					}
				}

				.wt-list:nth-last-of-type(1) {
					margin-right: 0;
				}
			}
		}

	}
</style>
